<template>
  <div class="history-search">
    <ul class="search-wrap">
      <li
        v-for="(item, index) in list"
        :key="index"
        :class="{active:kind === item.kind}"
        class="search-grid"
        @click="handleSearchClick(item,index)"
      >{{ item.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      kind: 'all',
      list: [
        {
          title: '全部',
          kind: 'all'
        },
        {
          title: '一年级',
          kind: '1'
        },
        {
          title: '二年级',
          kind: '2'
        }
      ]
    }
  },
  methods: {
    handleSearchClick(item, index) {
      this.kind = item.kind
      this.$emit('changeKind', { kind: item.kind })
    }
  }
}
</script>

<style lang="scss">
.history-search {
  ul.search-wrap {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 20px;
    height: 20px;
    li.search-grid {
      float: left;
      font-size: 14px;
      height: 20px;
      margin-right: 10px;
      cursor: pointer;
    }
    li.active {
      color: #ff9900;
    }
  }
}
</style>
